<template>
  <div id="zuida1">
    <!-- <h1>{{list}}</h1> -->
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data(){
    return{
        riqi:[],
    }
  },
  methods:{
    shuju(){
      let myChart = this.$echarts.init(document.getElementById('zuida'));
     var option = {
    backgroundColor: '#66c18c',
    title: {
        // text: this.list,
        text: '文章发表数量分析',
        top:20,
        left:'center',
        textStyle:{
            color:'#fff',
            fontSize:20
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        top: '15%',
        right: '3%',
        left: '5%',
        bottom: '12%'
    },
    xAxis: [{
        type: 'category',
        data: this.riqi,
        // data: ['周1', '2', '3', '4', '5', '6', '7'],
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            }
        },
        axisLabel: {
            margin: 10,
            color: '#e2e9ff',//字体颜色
            textStyle: {
                fontSize: 14
            },
        },
    }],
    yAxis: [{
        axisLabel: {
            formatter: '{value}'+'篇',
            color: '#e2e9ff',//左边字体颜色
        },
        axisLine: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.12)'//线颜色
            }
        }
    }],
    series: [{
        type: 'bar',
        // type: 'category',
        // data: this.list,
        data: this.$store.state.list,
        barWidth: '20px',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#41ae3c' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#66c18c' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: '#43b244',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: true,
                lineHeight: 30,
                width: 80,
                height: 30,
                backgroundColor: '#20a162',
                borderRadius: 200,
                position: ['-8', '-60'],
                distance: 1,
                formatter: [
                    '    {d|●}',
                    ' {a|{c}}     \n',
                    '    {b|}'
                ].join(','),
                rich: {
                    d: {
                        color: '#20894d',//小圆圈
                    },
                    a: {
                        color: '#fff',//字
                        align: 'center',
                    },
                    b: {
                        width: 1,
                        height: 30,
                        borderWidth: 1,
                        borderColor: '#20894d',//线
                        align: 'left'
                    },
                }
            }
        }
    }]
};
myChart.setOption(option);
    }
  },
//   props:{
//         init:Array,
//   },
  created(){
    var date=new Date()
      var yue=date.getMonth()+1
      var ri=date.getDate()
      this.riqi=[yue+'月'+(ri-6)+"日",yue+'月'+(ri-5)+"日",yue+'月'+(ri-4)+"日",yue+'月'+(ri-3)+"日",yue+'月'+(ri-2)+"日",yue+'月'+(ri-1)+"日",yue+'月'+ri+"日"]
    //   var user=JSON.parse(sessionStorage.getItem('user'))
    // var id=user.id
    // this.axios.post('/sum',{
    //     idd:id,
    //     date:[yue+'/'+(ri-6),yue+'/'+(ri-5),yue+'/'+(ri-4),yue+'/'+(ri-3),yue+'/'+(ri-2),yue+'/'+(ri-1),yue+'/'+ri]
    //   }).then((res)=>{
    //     this.$store.commit('shubian',res.data)
        
    //   })
  },
  mounted(){
    // this.list=[2,3,4,5,6,7,8]
    // console.log(this.init);
    // this.list=this.init
    // this.$store.dispatch('qing')
    this.shuju()
    var user=JSON.parse(sessionStorage.getItem('user'))
    var id=user.id
      var date=new Date() 
      var yue=date.getMonth()+1
      var ri=date.getDate()
    //   this.axios.post('/sum',{
    //     idd:id,
    //     date:[yue+'/'+(ri-6),yue+'/'+(ri-5),yue+'/'+(ri-4),yue+'/'+(ri-3),yue+'/'+(ri-2),yue+'/'+(ri-1),yue+'/'+ri]
    //   }).then((res)=>{
    //     console.log(this.list);
    //     this.list=res.data
    //     console.log(this.list);
    //   })
  },
  watch:{
    // list:{
    // immediate:true,
    // handler(newvalue,oldvalue){
    //     console.log('hh');
    //     this.list=newvalue
    //     console.log(newvalue);
    //     // this.$router.go(0)
    // }
    // }
  }
}
</script>
<style lang="less" scoped>
  #zuida1{
    width: 100%;
    height: 800px;
  }
</style>